<template>
  <!-- 管理员弹框 -->
  <a-modal
    :title="modalManagementTitle"
    width="800px"
    centered
    :visible="managementVisible"
    :maskClosable="false"
    okText="确定"
    @ok="submitInform('form')"
    @cancel="closeDraw"
  >
    <a-form-model
      ref="form"
      :model="form"
      :rules="rules"
      v-bind="formLayout"
      class="inform-form"
      style="height: auto"
    >
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-model-item label="用户名" prop="account">
            <a-input v-model="form.account" :maxLength="38" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="密码" prop="pwd">
            <a-input v-model="form.pwd" autocomplete="off" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-model-item label="姓名" prop="name">
            <a-input v-model="form.name" autocomplete="off" :maxLength="38" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="管理员类型" prop="auth">
            <a-select v-model="form.auth">
              <a-select-option :value="2" v-if="loginUserAuth===1||loginUserAuth === 2">段级管理员</a-select-option>
              <a-select-option :value="3">车间/科室管理员</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-model-item label="站段" prop="section">
            <a-select v-model="form.section" @change="handleSectionChange">
              <a-select-option v-for="section in sectionData" :key="section">
                {{ section }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12"  v-if="form.auth===3">
          <a-form-model-item label="车间/科室" prop="shop">
            <a-select v-model="form.shop">
              <a-select-option v-for="shop in shopData" :key="shop">
                {{ shop }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import {
  addManagement,
  updateManagement,
  getManagementDetail,
  getTree,
} from "@/api/management";
export default {
  props: {
    //关闭弹框
    closeFunc: {
      type: Function,
      default: () => {},
    },
    managementVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      default: null,
    },
    type: {
      type: Number,
      default: 0, //0是新增1是编辑
    },
  },
  data() {
    return {
      loginUserAuth:JSON.parse(localStorage.getItem("userInfo")).auth,
      sectionData: [],
      shopData: [],
      modalManagementTitle: "成员管理",
      unitList: [],
      form: {
        account: "",
        pwd: "",
        section: "",
        shop: "",
        name: "",
        auth:"",
      },
      formLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
      },
      rules: {
        account: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
        shop: [
          { required: true, message: "请选择车间/科室", trigger: "change" },
        ],
        section: [{ required: true, message: "请选择站段", trigger: "change" }],
        auth: [{ required: true, message: "请选择管理员类型", trigger: "change" }],
      },
    };
  },
  mounted() {
    if (this.type == 1) {
      this.getmanagementMessage();
    }
    this.getTree();
  },
  methods: {
    handleSectionChange() {
      this.form.shop = "";
      var shopArr = [];
      for (const key in this.treeArr[this.form.section]) {
        shopArr.push(key);
      }
      this.shopData = shopArr;
    },
    editSelectInit() {
      var sectionArr = [];
      var shopArr = [];
      for (const key in this.treeArr) {
        sectionArr.push(key);
      }
      for (const key in this.treeArr[this.form.section]) {
        shopArr.push(key);
      }
      this.shopData = shopArr;
    },
    //获取树结构
    getTree() {
      getTree()
        .then((res) => {
          this.treeArr = res.data.data;
          if (this.type == 1) {
            this.editSelectInit();
          } else {
            var sectionArr = [];
            var shopArr = [];
            for (const key in this.treeArr) {
              sectionArr.push(key);
            }
            for (const key in this.treeArr[sectionArr[0]]) {
              shopArr.push(key);
            }
            this.sectionData = sectionArr;
            this.shopData = shopArr;
            // this.form.section = sectionArr[0];
            // this.form.shop = shopArr[0];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getmanagementMessage() {
      getManagementDetail({
        id: this.id,
        page: 1,
        limit: 1,
      })
        .then((res) => {
          this.form.account = res.data.users[0].account;
          this.form.section = res.data.users[0].section;
          this.form.shop = res.data.users[0].shop;
          this.form.name = res.data.users[0].name;
          this.form.pwd = res.data.users[0].pwd;
          this.form.auth = res.data.users[0].auth
          this.getTree();
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        })
        .finally(() => {});
    },
    submitInform(formName) {
      //提交弹框表单
      this.loading = true;
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          this.loading = false;
          return false;
        }
        var params = Object.assign({}, this.form);
        if (this.type == 1) {
          params.id = this.id;
          this.updateSubmit(params);
        } else {
          this.addSubmit(params);
        }
      });
    },
    addSubmit(params) {
      addManagement(params)
        .then((res) => {
          if(res.code ===2){
            this.$message.error(res.msg)
            return false
          }
          if (res.data.ok) {
            this.$message.success("添加成功");
            this.$emit("updateInform");
          } else {
            console.log(res.data.errDatas[0].err);
            this.$message.error(res.data.errDatas[0].err);
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.destroy();
          this.$message.error(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    updateSubmit(params) {
      updateManagement(params)
        .then((res) => {
          this.$message.destroy();
          this.$message.success("编辑成功");
          this.$emit("updateInform");
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //关闭弹框
    closeDraw() {
      this.$emit("closeFunc");
    },
  },
  watch: {
    managementVisible(n) {
      if (n) {
        if (this.type == 1) {
          this.getmanagementMessage();
        }
        this.getTree();
      } else {
        this.$refs["form"].resetFields();
      }
    },
  },
};
</script>

<style lang="stylus" scoped></style>